<template>
  <div class="template-detail pad">
    <div class="head">
      <span>AI模板详细</span>
    </div>
    <el-table class="m-t-b" border stripe :data="template">
      <el-table-column label="模板原型图片">
        <template slot-scope="scope">
          <el-image style="width: 50%;" :src="scope.row.img" :preview-src-list="srcList">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="AI识别字段">
        <template slot-scope="scope">
          <span style="display: block; text-align: center;" v-for="(item, i) in scope.row.letters" :key="i">{{item}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'template-detail',
  props: ['id'],
  data () {
    return {
      template: [{
        img: require('../assets/images/home_bac.png'),
        letters: ['身高', '体重', '性别', '年龄']
      }],
      srcList: [require('../assets/images/home_bac.png')]
    }
  }
}
</script>
<style lang="scss">
  .template-detail {
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
